<template>
    <div class="page">
        <header-view title="场馆详情"></header-view>
        <div class="deWrap">
            <div class="topImg">
                <img :src="venueInfo.Imgs"/>
                <p class="dots">{{venueInfo.Name}}</p>
            </div>
            <div class="detail show1px">
                <h3>场馆简介</h3>
                <p>{{venueInfo.Remind}}</p>
            </div>
            <ul class="Ilist">
                <li class="show1px" @click="jumpMap()"><img src="./../assets/icon/weizhi.svg"/>{{venueInfo.Adress}}</li>
                <li class="show1px"><a style="display: block;" :href="'tel:' + venueInfo.Phone"><img src="./../assets/icon/phone.svg" style="height: 1.1rem;"/>{{venueInfo.Phone}}</a></li>
                <li class="show1px starWrap" style="background: none">
                    <img src="./../assets/icon/score.svg"/>
                    <img v-for="item in stars" :src="item"/>
                    <span>{{this.venueInfo.Score}}分</span>
                </li>
            </ul>
            <div class="VenueSport">
                <div class="SportLT">
                    <ul class="clearfix" :style="{width:venueInfo.VenueSport.length * 3.5 + 'rem'}">
                        <li v-for="(item , index) in venueInfo.VenueSport" @click="changeSport(item , index)" :class="{active:activeIndex== index}"><span>{{item.Name}}</span></li>
                    </ul>
                </div>
                <div class="SportLB">
                    <ul class="clearfix" :style="{width:targetSport.timeItem.length * 4.75 + 0.75 + 'rem'}">
                        <li v-for="item in targetSport.timeItem" @click="getFieldState(item)">
                            <h3>{{item.Week}}</h3>
                            <p>{{item.Time}}</p>
                            <span>预订</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pVote">
                <h2>人次票</h2>
                <ul>
                    <li v-for="item in venueInfo.Ticket">
                    <div class="flex-container mtEt">
                        <div class="left"><b>￥</b>{{item.Pirce}}</div>
                        <div class="right">
                            <h3>{{item.Name}}</h3>
                            <p>{{item.Info}}</p>
                        </div>
                    </div>
                    <p class="ktP">有效期：{{item.sTime}}<span @click="jumpTPay(item.gId , 1)">购买</span></p>
                </li>
                </ul>
            </div>
            <div class="pVote">
                <h2>会员卡</h2>
                <ul>
                    <li v-for="item in venueInfo.DisV">
                        <div class="flex-container mtEt">
                            <div class="left"><b>￥</b>{{item.Dis && item.Dis.Price}}</div>
                            <div class="right">
                                <h3>{{item.Dis && item.Dis.Name}}</h3>
                                <p>{{item.Dis && item.Dis.Info}}</p>
                            </div>
                        </div>
                        <p class="ktP">周期：{{item.Dis && item.Dis.day}}天<span @click="jumpTPay(item.dv && item.dv.gId , 2)">购买</span></p>
                    </li>
                </ul>
            </div>
        </div>
        <!--选择座位-->
        <div class="selectSeat flex-container" v-show="showModal">
            <div>
                <div class="seatTitle show1px flex-container">
                    <div><span class="isSel"></span> <a>可选</a></div>
                    <div><span></span> <a>已售</a></div>
                    <div><span></span> <a>已选</a></div>
                    <a @click="showModal=!showModal"></a>
                </div>
                <div class="seatList">
                    <div :style="{width: field.length * 3 + 3 + 'rem'}">
                        <table>
                            <thead>
                            <tr><th style="width: 2.5rem;"></th><th v-for="item in field">{{item.Name}}</th></tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item , key) in newField">
                                <td class="timeT"><span>{{key.split(' ')[1]}}-</span></td>
                                <td v-for="list in item" @click="selectSeat(list)" :class="{active: list.State!=0 , activeT: selectIds.indexOf(list.Id) >= 0}">{{list.State != 0 ? '': list.Price}}</td>
                            </tr>
                            <tr>
                                <td class="timeT" style="height: 0;"><span>{{field[0] && field[0].endBusinessTime}}-</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <a class="commit" @click="selectCommit" :class="{active:selectItems.length}">￥{{getTotal}} 确定</a>
            </div>
        </div>
    </div>
</template>

<script>
    import HeaderView from './../components/header';
    import utils from './../js/utils';
    export default {
        name: "venueDetail",
        data(){
            return {
                venueInfo:{VenueSport: [] ,Ticket:[] , DisV:[]},
                stars: [],
                activeIndex: 0,
                targetSport: { timeItem: [] },
                showModal: false,
                field: [],
                newField: {},
                selectItems: [],
                selectIds: []
            }
        },
        computed:{
            getTotal(){
                let total = 0;
                this.selectItems.forEach((item)=>{
                    total+= item.Price
                });
                return parseFloat(total).toFixed(2);
            }
        },
        components:{
            HeaderView
        },
        mounted(){
            this.VenueInfo();
        },
        methods:{
            /*
            * 切换球类
            * */
            changeSport(item ,index){
                this.activeIndex = index;
                this.targetSport = item;
            },
            /*
            * 处理评分
            * */
            handelStar(){
                let star = require('./../assets/icon/star.svg');
                let score = this.venueInfo.Score ,
                    gScore = Math.floor(score) ,
                    stars = [star,star,star,star,star];
                if(score - gScore > 0){
                    stars.splice(gScore ,1, require('./../assets/icon/star-b.svg'));
                    gScore++;
                }
                for(let i = gScore; i < 5 ; i++){
                    stars.splice(i ,1, require('./../assets/icon/star-hui.svg'));
                }
                this.stars = stars;
            },
            /*
            * 获取场馆详情
            * */
            VenueInfo(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Field/VenueInfo',
                    params: {venueid: that.$route.query.id},
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.venueInfo = result.data.venueInfo;
                        that.handelStar();
                        if(that.venueInfo.VenueSport.length) that.targetSport = that.venueInfo.VenueSport[0];
                    }
                })
            },
            /*
            * 跳到地图组件去
            * */
            jumpMap(){
                location.href = 'http://feiyutiyu.cn/wap/map.html?xPoint=' + this.venueInfo.xPoint + '&yPoint=' + this.venueInfo.yPoint;
            },
            /*
            * 预定座位
            * */
            getFieldState(item){
                this.selectItems = [];
                this.selectIds = [];
                let venueSportId = this.targetSport.Id;
                let date = item.time;
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Field/FieldState',
                    params: {
                        venueSportId: venueSportId,
                        date:date
                    },
                    success(result){
                        if(result.errcode < 0 ){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.showModal = !that.showModal;
                        let field = result.data.field;
                        that.field = field;
                        let newField = {};
                        //将展示数据重排
                        for(let i = 0 ; i < field.length;i++){
                            let fieldState = field[i].FieldState;
                            for(let j = 0 ; j < fieldState.length; j++){
                                if(!newField[fieldState[j].startTime]){
                                    newField[fieldState[j].startTime] = [];
                                    newField[fieldState[j].startTime].push(fieldState[j]);
                                }
                                else newField[fieldState[j].startTime].push(fieldState[j]);
                            }
                        }
                        that.newField = newField;
                    }
                })
            },
            /*
            * 选择座位
            * */
            selectSeat(item){
                if(item.State != 0) return;
                let index = -1;
                for(let i = 0 ; i < this.selectItems.length ; i++){
                    if(this.selectItems[i].Id == item.Id){
                        index = i;
                    }
                }
                if(index >= 0){
                    this.selectItems.splice(index , 1);
                    this.selectIds.splice(index , 1)
                }
                else{
                    this.selectItems.push(item);
                    this.selectIds.push(item.Id);
                }
            },
            /*
            * 选择场地确定
            * */
            selectCommit(){
                if(!this.selectItems.length) return;
                this.showModal = !this.showModal;
                let str = "?fieldStates=" + this.selectIds.join("&fieldStates=");
                utils.ajax({
                    url: utils.AJAX_SRC + 'Field/createOrder' + str,
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        location.href = "http://feiyutiyu.cn/wap/confirmorder.html?Id=" + result.data.Id;
                    }
                })
            },
            /*
            * 人次票
            * 会员卡支付
            * */
            jumpTPay(gid ,type){
                if(type == 1){
                    location.href = 'http://feiyutiyu.cn/wap/BuyTicket01.html?TicketgId=' + gid;
                    return;
                }
                location.href = 'http://feiyutiyu.cn/wap/BuyCard.html?gId=' + gid;
            }
        }
    }
</script>

<style scoped>
    .mtEt{padding-bottom: 0.5rem;}
    .ktP{font-size: 0.6rem;color: #ccc;padding-top: 0.5rem;border-top: 1px dashed #ccc;position: relative;}
    .ktP span{position: absolute;right: 0;bottom: -0.2rem;display: inline-block;height: 1.2rem;line-height: 1.2rem;width: 2.4rem;background: #00acfd;color: #fff;text-align: center;font-size: 0.7rem;border-radius: 0.2rem;}
    .mtEt p{font-size: 0.6rem;color: #999;padding-top: 0.2rem;}
    .mtEt .left b{font-size: 0.6rem;}
    .mtEt .left{flex: 1;font-size: 2rem;color: red;}
    .mtEt .right{flex: 2;}
    .pVote ul li{background: #fff;border-radius: 0.2rem;padding: 0.5rem;margin-bottom: 0.5rem;}
    .pVote ul{padding: 0.5rem;}
    .pVote h2{height: 2rem;line-height: 2rem;padding: 0 0.75rem;background: #fff;font-size: 0.75rem;}
    .seatList table{text-align: center;color: #666;border-spacing: 5px;}
    .seatList td{border: 1px solid #aaa;height: 1.6rem;color: #666;border-radius: 0.2rem;}
    .seatList td.active{background: #aaa;}
    .seatList td.activeT{background: #0bc886;color: #fff;border: none;}
    .seatList th{background: #fff;width: 3rem;line-height: 2rem;font-weight: normal;}
    .seatList td.timeT{position: relative;color: #666;border: none;}
    .timeT span{position: absolute;left: 0;top: -0.76rem;}
    .topImg{position: relative;}
    .topImg img{width: 100%;}
    .topImg p{position: absolute;left: 0;bottom: 0;width: 100%;color: #fff;background: rgba(0,0,0,0.3);font-size: 0.6rem;padding: 0.25rem 0.75rem;}
    h3{font-size: 0.75rem;}
    .detail{background: #fff;padding: 0.75rem;position: relative;}
    .detail p{font-size: 0.6rem;color: #666;line-height: 1.8;}
    .Ilist{background: #fff;}
    .Ilist li{line-height: 2.4rem;height: 2.4rem;position: relative;padding: 0 0.75rem;background: url(./../assets/icon/arrow-right.svg) no-repeat 97% center / 0.8rem;}
    .Ilist img{vertical-align: middle;margin-right: 0.75rem;height: 1.2rem;}
    .starWrap span{display: inline-block;vertical-align: middle;font-size: 0.6rem;color: #f6a279;line-height: 2.2rem;margin-top: 0.1rem;}
    .starWrap img{height: 0.8rem;margin-right: 0.25rem;}
    .starWrap > img:first-child{height: 1.2rem;margin-right: 0.75rem;}
    .VenueSport ul li{float: left;}
    .SportLT{font-weight: bold;color: #666;padding: 0 0.75rem;background: #fff;}
    .SportLT li{border-bottom: 2px solid #fff;width: 3.5rem;text-align: center;}
    .SportLT span{display: inline-block;}
    .SportLT li.active{color: #00acfd;border-color: #00acfd;}
    .SportLT ul{line-height: 2rem;}
    .SportLB{background: #f1f1f1;padding: 0.75rem 0;width: 100%;overflow-x: auto;overflow-scrolling: touch;}
    .SportLB ul{width: 40rem;}
    .SportLB li{width: 4rem;height: 5rem;background: #fff;text-align: center;margin-left: 0.75rem;border: 1px solid #e9e5e3;}
    .SportLB h3{font-weight: bold;margin-top: 0.5rem;}
    .SportLB p{font-size: 0.6rem;color: #999;margin: 0.25rem 0;}
    .SportLB span{display: inline-block;color: #00acfd;border: 1px solid #e9e5e3;height: 1.3rem;line-height: 1.3rem;width: 3rem;text-align: center;border-radius: 0.65rem;}
    .selectSeat{position: fixed;left: 0;top: 0;bottom: 0;right: 0;z-index: 999;background: rgba(0,0,0,0.4);align-items: flex-end;}
    .selectSeat > div{background: #fff;width: 100%;}
    .seatTitle{height: 2.4rem;line-height: 2.4rem;position: relative;overflow: hidden;justify-content: flex-end;font-size: 0.75rem;}
    .seatTitle span{display: inline-block;height: 1rem;width: 2rem;vertical-align: middle;border-radius: 0.1rem;}
    .seatTitle span.isSel{border: 1px solid #aaa;}
    .seatTitle a{display: inline-block;vertical-align: middle;}
    .seatTitle div{margin-right: 1rem;}
    .seatTitle > div:nth-child(2) span{background: #aaa;}
    .seatTitle > div:nth-child(3) span{background: #0bc886;}
    .seatTitle > a{position: absolute;left: 0;top: 0;width: 2.4rem;background: url(./../assets/icon/arrow-left.svg) no-repeat 0.5rem center / 1.6rem;display: inline-block;height: 2.4rem;}
    .commit{display: block;height: 2.2rem;line-height: 2.2rem;width: 100%;text-align: center;color: #fff;font-size: 0.8rem;background: #aaa;}
    .commit.active{background: linear-gradient(to right,#7a84ff 46%,#1f75fc);}
    .seatList{padding: 0.2rem 0.75rem 1.5rem;height: 20rem;width: 100%;overflow: auto;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;}
</style>
